<template>
  <div>
    <h2>Music组件</h2>
    <div>
      <!-- <button @click="$router.push('/home/music/item/1/周杰伦')">周杰伦</button>
      <button @click="$router.push('/home/music/item/2/林俊杰')">林俊杰</button>
      <button @click="$router.push('/home/music/item/3/孙燕姿')">孙燕姿</button> -->
      <!-- 
        params传参,并且location是对象形式需要注意两点:
          1. params不能和path配合使用,params只能和name配合使用
          2. params中的属性如果不需要传递,则可以在路由表中配置当前path可选,或者给这个属性传递一个null,但是不要给属性传递空字符串
       -->
      <button
        @click="
          $router.push({
            //path: '/home.music/item',
            name: 'MusicItem',
            params: { id: '1', name: '周杰伦' },
          })
        "
      >
        周杰伦
      </button>

      <button
        @click="
          $router.push({
            //当使用params传递参数的时候,不要传递空字符串
            //name: undefined,
            //path: '/home.music/item',
            name: 'MusicItem',
            params: { id: '2', name: null },
          })
        "
      >
        林俊杰
      </button>
      <button
        @click="
          $router.push({
            //path: '/home.music/item',
            name: 'MusicItem',
            params: { id: '3', name: '孙燕姿' },
          })
        "
      >
        孙燕姿
      </button>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "Music",
  mounted() {
    console.log("Music 初始化");
  },
  beforeDestroy() {
    console.log("Music 即将卸载");
  },
  activated() {
    console.log("Music 组件激活");
  },
  deactivated() {
    console.log("Music 组件失活");
  },
};
</script>

<style></style>
